<template>
    <div class="home-mv">
        <div class="home-mvlist" ref="mvlist">
            <ul>
                <li >
                    
                    <div class="list-item-video" @click.stop="mvPlayend">
                    <span class="iconfont icon-arrow-left-bold" @click.stop="goPrev"></span>
                    <video controls :src="mvUrl" ref="video" @loadeddata="loadeddataPlay"
                    ></video>
                  </div>
                    <div class="list-item-foot">
                        <p>{{muiscListMv[index].name}}<span>--{{muiscListMv[index].artistName}}</span></p>
                        <p><span class="iconfont icon-aixin"></span>{{comment.likedCount | playCount}}</p>
                        <p>
                            <i class="fa fa-share-square-o" aria-hidden="true"></i> {{comment.shareCount | playCount}}
                        </p>
                        <p>
                            <i class="fa fa-twitch" aria-hidden="true"></i>
                            {{comment.commentCount | playCount}}
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="home-comment-box">
            <van-tabs @click="onClick">
            <van-tab title="热门评论">
                <div class="home-comment-list">
                <ul>
                    <li class="home-comment" v-for="(item) in hotComments" :key="item.commentId">
                        <img :src="item.user.avatarUrl" alt="">
                        <div class="home-comment-div">
                            <div class="comment-div-top">
                                <span>
                                    {{item.user.nickname}}
                                </span>
                                <span>
                                    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    {{item.likedCount}}
                                </span>
                            </div>
                            <div class="comment-div-bot">{{item.content}}</div>
                        </div>
                    </li>
                </ul>
            </div>
            </van-tab>
            <van-tab title="更多评论">
                <div class="home-comment-list">
                <ul>
                    <li class="home-comment" v-for="(item) in commentsList" :key="item.commentId">
                        <img :src="item.user.avatarUrl" alt="">
                        <div class="home-comment-div">
                            <div class="comment-div-top">
                                <span>
                                    {{item.user.nickname}}
                                </span>
                                <span>
                                    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    {{item.likedCount}}
                                </span>
                            </div>
                            <div class="comment-div-bot">{{item.content}}</div>
                        </div>
                    </li>
                </ul>
            </div>
            </van-tab>
            </van-tabs>
            
        </div>
        <!-- 相似mv -->

    </div>
</template>
<script>
//引入获取数据接口函数
import {getMvUrl,getSimiMv,getMvdetailInfo,getMvComment} from "../../api/mv";
import { Toast } from 'vant';
export default {
    data() {
        return{
            muiscListMv:[], //播放mv的详细数据
            id:null,
            index:null,
            mvUrl:null,
            comment:{}, //评论点赞数
            simiMvList:[], //相似mv
            commentsList:[],//评论
            hotComments: [],//热评
        }
    },
    //过滤数量
    filters: {
    //过滤点赞数量
    playCount(value) {
      let m = value > 10000 ? parseInt(value / 10000)+ '万' : value;
      return m;
    },
  },
    methods: {
        //点击更多评论-热门评论
        onClick(name,title) {
            Toast(title);
            },
        //点击回退按钮
        goPrev(){
            this.$router.go(-1);

        },    
        //获取MV播放地址
        getMvUrlFun() {
        
            getMvUrl({id:this.id}).then(data=>{
                
                this.mvUrl=data.data.url;           
            })
        },
        //点击暂停视频播放
        mvPlayend(){
        this.$refs(video)[0].pause();
        },
        //当加载媒介数据时运行脚本 播放视频
        loadeddataPlay(event) {
        event.target.play();

        },
        
        //相似mv
        getSimiMvFun() {
            getSimiMv({mvid:this.id}).then(data=>{
                
                this.simiMvList=data.mvs;
            })
        },
        //获取mv评论
        getMvCommentFun() {
            getMvComment({id:this.id}).then(data=>{
                
                this.commentsList=data.comments;
                this.hotComments=data.hotComments;
            })
        }
    },
    created() {
        //截取home组件传递的参数
        this.id=this.$route.params.id;
        this.index=this.$route.params.index;
        this.muiscListMv=this.$route.params.musicListMv;
        
        this.getMvUrlFun();
        this.getSimiMvFun();
        this.getMvCommentFun();
        // 获取点赞数量
        getMvdetailInfo({mvid:this.$route.params.id}).then(data=>{      
            console.log(data);    
            this.comment=data;
        })
    }
}
</script>

<style scoped lang="less">
.home-mvlist {
    width:100%;
    li{
        .list-item-video{
            width:100%;
            height:200px;
            position: relative;
            span{
                position: absolute;
                top:10px;
                left:10px;
                z-index:99;
                margin:auto;
                width:40px;
                height:40px;
                text-align:center;
                line-height:40px;
                background:rgba(0,0,0,0.5);
                border-radius:50%;
                color:#fff;
                font-size:24px;
            }
            video{
                height:200px;
                margin: 0 auto;
                display: block;
                
            }
        }
        p{
            font-size:16px;
            padding:10px;
            span{
                font-size:14px;
                color:#789079;
            }
        }
        .list-item-foot{
            display: flex;
            justify-content: space-around;
            align-items: center;
            p{
                display:flex;
            }
        }
    }
}
.home-comment-box{
    margin-top: 20px;

}
.home-comment-box{
    .home-comment-list{
        padding: 10px 0;
        .home-comment{
            display: flex;
            padding:10px 10px;
            img{
                width:40px;
                height:40px;
                border-radius: 50%;
                margin-right: 15px;
            }
            .home-comment-div{
                flex:1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                border-bottom:1px solid #e6e6e6;

                .comment-div-top{
                    padding-top:5px;
                    display:flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size:14px;
                    color:#789079;
                    margin-bottom: 5px;
                }
                .comment-div-bot{
                    margin-top: 5px;
                    font-size:14px;
                    text-align: left;
                }
            }
        }
    }
}
</style>